<template>
    <div class="classics-hot">
        <div class="classics-hot-title">
            <h4>PART.6th-----------------------------------------------------</h4>
            <div class="classics-hot-list">
                <ul>
                    <li v-for="(item, index) in shoplist.data">
                        <div class="classics-img" @click="goCont(item)">
                            <img :src="item.img" alt="" srcset="">
                            <span class="iconfont icon-gonggong-chanpinbiaoqian2"></span>
                        </div>
                        <div class="classics-con">
                            <h5>{{ item.name }}</h5>
                            <p>{{ item.Eng }}</p>
                            <p>默认：{{ item.cup }}</p>
                            <div class="classics-add">
                                <h5>￥{{ item.price }}</h5>
                                <span class="iconfont icon-jiahao-" @click="goDetail(item)"></span>
                            </div>
                        </div>
                    </li>



                </ul>
            </div>
        </div>
    </div>
</template>
<style lang="scss">
@import url(../../static/style/reset.css);
@import "../../static/style/variable.scss";

.classics-hot {

    width: 95%;
    margin: 1.3333rem auto 0;

    h4 {
        color: #686767;
    }

    .classics-hot-list {
        width: 90%;
        margin: 0 auto;

        ul {

            li {
                display: flex;
                margin-top: 1.3333rem;

                .classics-img {
                    position: relative;
                    // border: 1px solid #686767;
                    width: 6.3333rem;
                    height: 5.3333rem;
                    border-radius: 10px;
                    // overflow: hidden;

                    img {
                        width: 85%;
                        height: 100%;
                        box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.12);
                        border-radius: 10px;

                    }

                    span {
                        position: absolute;
                        top: -0.4rem;
                        left: -0.3333rem;
                        font-size: 30px;
                        color: red;
                    }
                }

                .classics-con {
                    flex: 1;

                    h5 {
                        font-size: 16px;
                        color: #383838;
                        margin-bottom: .2333rem;
                    }

                    p {
                        color: #a6a6a6;
                        font-size: 12px;
                        padding-top: .2333rem;
                    }

                    .classics-add {
                        display: flex;
                        justify-content: space-between;

                        h5 {
                            margin-top: .4333rem;
                            font-size: 15.5px;
                        }

                        span {
                            font-size: 25px;
                            color: #2b4c7e;
                        }
                    }
                }


            }
        }
    }
}
</style>
<script lang="ts" setup>
import { reactive, ref, defineComponent, onMounted, computed, onBeforeMount } from "vue";
import { useRoute, useRouter } from 'vue-router';
import { getShopList } from '../../request'
const router = useRouter();

let shoplist: any = reactive({
    data: []
})
onBeforeMount(() => {
    getShopList().then((content: any) => {

        let { result } = content;
        let hot = result.map((item: any) => {
            let obj: any = {};
            obj.id = item.shop_id;
            obj.name = item.shop_name;
            obj.Eng = item.shop_Eng;
            obj.img = item.shop_img;
            obj.cup = item.shop_cup;
            obj.sugar = item.shop_sugar;
            obj.temp = item.shop_temp;
            obj.price = item.shop_price
            return obj
        })
        shoplist.data = hot;
        // store.commit('setAAA', hot);
    })
        .catch(err => {
            console.log(err);

        })
})




const goDetail = (item: any) => {
    router.push({
        path: '/menu/detail',
        query: {
            msg: 'detail',
            id: item.id
        }
    })
}
const goCont = (item: any) => {
    router.push({
        path: '/menu/content',
        query: {
            msg: 'content',
            id: item.id
        }
    })
}
</script>